<template>
  <div class="page">
    <div class="rightbox">
      <div class="nav">
        <div class="tab active">管理员登录</div>
        <div style="clear:both;"></div>
        <div class="loginform">
          <el-form :model="login" ref="login" :rules="rules">
            <el-form-item prop="username">
              <el-input v-model="login.username" placeholder="请输入你的用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="login.password" type="password" placeholder="请输入你的密码"></el-input>
            </el-form-item>
            <br>
            <el-button type="success" style="width:100%;" @click="Login()">登录</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout:"adminlogin",
  data() {
    return {
      login: {
        username: "",
        password: ""
      },
    };
  },
  methods: {
    Login() {
      if(this.login.username="admin"&&this.login.password=="admin"){
         this.$message({
              message: "登录成功",
              type: "success"
            });
        this.$store.commit("commons/setIsadmined",'1');
        this.$router.push("/admin/art")
      }
    }
  }
};
</script>
<style lang="less" scoped>
.rightbox {
  width: 450px;
  margin-top: 200px;
  margin-right: 150px;
  float: right;
  background: rgba(238, 250, 216, 0.637);
  box-shadow: 20px 20px #d0ddf0ba;
}
.page {
  // background-color: #f6f6f6;
  background: url("http://localhost:8010/getImage?name=th04.jfif") no-repeat;
  height: 900px;
}
.nav {
  height: 100%;
  .tab {
    background: #eee;
    width: 100%;
    height: 70px;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    // box-shadow: 0px 0px 5px 1px #ddd;
    &.active {
      background: white;
      box-sizing: border-box;
      border-bottom: 8px solid #a8bfe845;
    }
    &:hover {
      cursor: pointer;
    }
  }
}
.loginform {
  background: white;
  padding: 50px;
  margin: 0 auto;
}
</style>